<!-- <script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useCounterStore } from "@/stores/counter"

const store = useCounterStore();

const router = useRouter()

const form = reactive({
    userName: "",
    password: ""
})

const login = () => {
    axios.post("http://localhost:42960/api/User/Login?UserName=" + form.userName + "&Password=" + form.password, {

        userName: form.userName,
        password: form.password

    }).then(res => {
        if (res.data.code == 100) {
            store.currentAccount.userId = res.data.data.userId;
            store.currentAccount.userName = res.data.data.userName;
            store.currentAccount.password = res.data.data.password;
            store.currentAccount.roleId = res.data.data.roleId;

            ElMessage.success(res.data.message)
            router.push("/Main")
        }
        else {
            ElMessage.error(res.data.message)
            return
        }
    })
}

</script> -->
<template>
    <div class="login-container">
        <h1>登录</h1>
        <form @submit.prevent="login">
            <input v-model="userName" placeholder="用户名" />
            <input v-model="password" type="password" placeholder="密码" />
            <button type="submit">登录</button>
        </form>
        <p>{{ message }}</p>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
const router = useRouter();

const userName = ref('');
const password = ref('');
const message = ref('');

const login = async () => {

    try {
        const response = await axios.post('http://localhost:5080/api/User/Login?userName=' + userName + '&password=' + password, {
            userName: userName.value,
            password: password.value
        });
        message.value = response.data.message || '登录成功';
        router.push({ path: '/Main' });
    } catch (error) {
        if (error.response) {
            message.value = error.response.data.error || '未知错误';
        } else {
            message.value = '请求出错，请稍后重试';
        }
    }
};
</script>

<style scoped>
body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background: url('C97A21213EB4AF0E0543DCC3CE82B630.jpg') no-repeat center center fixed;
    background-size: cover;
}

.login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    background: rgba(0, 0, 0, 0.5);
    /* 半透明背景以突出表单 */
    padding: 20px;
    border-radius: 10px;
}

h1 {
    color: white;
    margin-bottom: 20px;
}

form {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 300px;
}

input {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

p {
    color: white;
    margin-top: 20px;
}
</style>
